<template>
	<view class="pd-10 coreshop-margin-10 bg-white coreshop-border-radius-trbl-18"
		style="overflow: hidden;">
		<u-tabs :list="nameList" :current="current" @change="onChange"></u-tabs>
		<view class="coreshop-divider">
			<view class="complete"></view>
		</view>

		<view class="coreshop-text-black" v-for="(newData, indexParent) in asData.parameters.list" :key="indexParent"
			v-show="newData.isShow">
			<view class="flex-box clear-fix">
				<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2" v-for="(item,index) in newData.list"
					:key="index" v-if="newData.column==2">
					<view
						class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18"
						@click="goGoodsDetail(item.id)">
						<image :src="item.image" class="img" mode="widthFix"></image>
						<view class="coreshop-multiple-line-clamp">
							<text class="coreshop-font-14">{{item.name}}</text>
						</view>
						<view
							class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
							<view class="coreshop-text-red coreshop-font-weight-bold">
								<text class="coreshop-font-12">¥</text>
								<text class="coreshop-font-16">{{item.price}}</text>
								<span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray"
									v-if="newData.column==2">{{item.mktprice}}元</span>
							</view>
							<view>
								<text
									class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-box3 clear-fix">
				<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value3" v-for="(item,index) in newData.list"
					:key="index" v-if="newData.column==3">
					<view
						class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-4 coreshop-padding-right-4 coreshop-bg-main coreshop-border-radius-bl-18"
						@click="goGoodsDetail(item.id)">
						<image :src="item.image" class="img" mode="widthFix"></image>
						<view class="coreshop-multiple-line-clamp">
							<text class="coreshop-font-14">{{item.name}}</text>
						</view>
						<view
							class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
							<view class="coreshop-text-red coreshop-font-weight-bold">
								<text class="coreshop-font-12">¥</text>
								<text class="coreshop-font-16">{{item.price}}</text>
								<span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray"
									v-if="newData.column==2">{{item.mktprice}}元</span>
							</view>
							<view>
								<text
									class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="coreshop-text-black" v-for="(item, index) in newData.list" :key="index" v-if="newData.column==1">
				<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10"
					v-if="newData.list.length" @click="goGoodsDetail(item.id)">
					<view>
						<u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
					</view>
					<view class="coreshop-flex coreshop-flex-direction  coreshop-padding-left-10">
						<view class="coreshop-font-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
						<view
							class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">
							{{ item.brief }}</view>
						<view class="coreshop-flex coreshop-align-center coreshop-padding-top-10  coreshop-padding-bottom-10">
							<view
								class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">
								已售{{item.buyCount}}{{item.unit}}</view>
							<view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">
								{{item.viewCount}}人访问</view>
						</view>
						<view class="coreshop-flex coreshop-justify-between  coreshop-flex-direction-row coreshop-align-center">
							<view class="coreshop-flex coreshop-align-center">
								<view class="coreshop-font-14 coreshop-text-red">￥{{ item.price  }}</view>
								<view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
							</view>
							<view class="coreshop-buy-btn">立即购</view>
						</view>
					</view>
				</view>
				<view class="order-none" v-else>
					<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无"
						mode="list"></u-empty>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				nameList: [],
			};
		},
		name: "GoodTabBar",
		props: {
			asData: {
				// type: Array,
				required: true,
			}
		},
		mounted() {
			var _this = this;
			for (var i = 0; i < this.asData.parameters.list.length; i++) {
				let item = {
					name: this.asData.parameters.list[i].title
				}
				this.nameList.push(item);
				if (_this.current == i) {
					this.asData.parameters.list[i].isShow = true;
				} else {
					this.asData.parameters.list[i].isShow = false;
				}
			}
		},
		methods: {
			onChange(item) {
				var _this = this;
				this.current = item.index;
				for (var i = 0; i < _this.asData.parameters.list.length; i++) {
					if (_this.current == i) {
						_this.asData.parameters.list[i].isShow = true;
					} else {
						_this.asData.parameters.list[i].isShow = false;
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.flex-box {
		column-count: 2;
		column-gap: 8px;

		.column-value2 {
			width: 100%;
			break-inside: avoid;
			color: #333333 !important;
			margin-bottom: 8px;
		}
	}

	.flex-box3 {
		column-count: 3;
		column-gap: 8px;

		.column-value3 {
			width: 100%;
			break-inside: avoid;
			color: #333333 !important;
			margin-bottom: 5px;
		}
	}

	.img {
		width: 100%;
	}

	.clear-fix::after {
		content: '';
		display: block;
		height: 0;
		clear: both;
	}

	.clear-fix {
		zoom: 1;
	}
</style>